<!-- 首页主页中的内容 -->
<template>
  <div class="home-index">
    <div class="top-bg" :style="topbg"></div>
    <div class="home-index-swiper">
      <mt-swipe :auto="4000" @change="handleChange">
        <mt-swipe-item v-for="swiperData in swiperDatas" :key="swiperData.id"
          ><img :src="swiperData.pic" alt=""
        /></mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 快捷导航 -->
    <div class="home-index-quicknav">
      <mt-swipe :auto="0" :continuous="false">
        <mt-swipe-item
          v-for="(homeNavData, index) in homeNavDatas"
          :key="index"
        >
          <ul>
            <li v-for="homeitem in homeNavData" :key="homeitem.id">
              <img :src="homeitem.pic" alt="" />
              {{ homeitem.title }}
            </li>
          </ul>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 商城热点 -->
    <div class="home-index-hotnews">
      <div class="news">
        <img
          src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978466633.png"
          alt=""
        />
        <!-- 垂直轮播 -->
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">服务店突破2000多家</div>
            <div class="swiper-slide">我们成为中国最大家电零售B2B2C系统</div>
            <div class="swiper-slide">三大国际腕表品牌签约</div>
          </div>
        </div>
        <i class="iconfont icon-jiantou21"></i>
      </div>
    </div>
    <div class="ad">
      <img :src="adImg" alt="" />
    </div>
    <!-- 秒杀内容 -->
    <seckill-com></seckill-com>
    <!-- 商品列表 -->
    <product-list :listTab="listTabShow"></product-list>
    <div style="height: 2000px; width: 100%; background: pink"></div>
    <div class="kefu">
      <a
        target="_blank"
        href="http://wpa.qq.com/msgrd?v=3&uin=843252505&site=qq&menu=yes"
        ><img
          border="0"
          src="https://x.dscmall.cn/storage/assets/admin/images/kefu_logo.png"
          alt="点击这里给我发消息"
          title="点击这里给我发消息"
      /></a>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import quicknav from "@/mock/quicknav.json";
import SeckillCom from "./SeckillCom.vue";
import ProductList from "./ProductList.vue";
// 引入Swiper对象
import Swiper from "swiper";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { SeckillCom, ProductList },
  data() {
    //这里存放数据
    return {
      swiperDatas: [
        {
          id: 1,
          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978394783.jpg",
        },
        {
          id: 2,
          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395241.jpg",
        },
        {
          id: 3,
          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395260.jpg",
        },
      ],
      bgcolorArr: [
        {
          background: "rgb(226, 44, 44)",
        },
        {
          background: "rgb(60, 129, 255)",
        },
        {
          background: "rgb(2, 131, 121)",
        },
      ],
      topbg: {
        background: "rgb(226, 44, 44)",
      },
      homeNavDatas: quicknav.homeNavjson,
      adImg:
        "https://x.dscmall.cn/storage/data/gallery_album/original_img/CPvH5WHHbF0EoG9XjRQbbT3knMVCeEt9DlYGQhJM.png?imageView2/2/format/webp",
      listTabShow: true,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleChange(index) {
      this.topbg = this.bgcolorArr[index];
    },
  },
  mounted() {
    new Swiper(".news .swiper-container", {
      direction: "vertical", // 垂直切换选项
      autoplay: {
        delay: 3000,
        stopOnLastSlide: true,
        disableOnInteraction: true,
      },
    });
  },
};
</script>
<style lang="less">
.home-index {
  // 底部颜色设置元素
  .top-bg {
    width: 100%;
    height: 14rem;
    position: relative;
    top: -9.5rem;
    border-radius: 0 0 2rem 2rem;
  }
  //   导航轮播
  .home-index-swiper {
    //   calc:是css中计算数据运算的函数-- 符号中间要有 空格
    width: calc(100% - 2rem);
    height: 12rem;
    margin: -14rem 1rem 0;
    img {
      width: 100%;
      height: 100%;
      border-radius: 1.5rem;
    }
  }
  //   快捷导航
  .home-index-quicknav {
    width: calc(100% - 2rem);
    margin: 1rem 1rem 0;
    height: 20rem;
    border-radius: 1rem 1rem 0 0;
    background-color: #fff;
    .mint-swipe {
      ul {
        height: 18rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        li {
          width: 20%;
          height: 9rem;
          text-align: center;
          img {
            width: 7.1rem;
            height: 7.1rem;
          }
        }
      }
      //   修改原本的指示器的样式
      .mint-swipe-indicators {
        bottom: 0.4rem;
        .mint-swipe-indicator {
          width: 1.5rem;
          height: 0.4rem;
          border-radius: 0;
          background-color: rgb(226, 44, 44);
          margin: 0;
        }
        .is-active {
          opacity: 0.5;
        }
        .mint-swipe-indicator:first-child {
          border-radius: 1rem 0 0 1rem;
        }
        .mint-swipe-indicator:last-child {
          border-radius: 0 1rem 1rem 0;
        }
      }
    }
  }
  // 商城热点
  .home-index-hotnews {
    width: calc(100% - 4rem);
    height: 4rem;
    padding: 0.5rem 1rem;
    margin: 0 1rem;
    background-color: #fff;
    .news {
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 3rem;
      padding: 1rem 0;
      border-radius: 0 0 1rem 1rem;
      img {
        width: 7rem;
        height: 3rem;
      }
      .swiper-wrapper {
        height: 4rem;
        padding-left: 0.5rem;
        line-height: 4rem;
        font-size: 1.4rem;
        font-weight: 700;
      }
      .icon-jiantou21 {
        color: rgb(226, 44, 44);
        font-weight: 700;
      }
    }
  }
  .ad {
    width: calc(100% - 2rem);
    margin: 1rem;
    img {
      width: 100%;
    }
  }
  .kefu {
    position: fixed;
    bottom: 30%;
    right: 1rem;
    img {
      width: 6rem;
    }
  }
}
</style>